<template>
  <div class="detail">
    <div class="detail-head">
      <span @click='handleBack'>&lt;</span>
      <span>商品详情</span>
      <span>···</span>
    </div>
    <div class="detail-main">
      <img :src="detailInfo.image" alt="">
      <h3>{{detailInfo.title}}</h3>
      <p>{{detailInfo.content}}</p>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="handleGo"/>
      <van-goods-action-icon icon="star" text="已收藏" color="#ff5000" />
      <van-goods-action-button type="warning" text="加入购物车" @click="handleCart"/>
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>

  </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
export default {
  data(){
    return {

    }
  },
  computed:{
   ...mapState(['userId','detailInfo'])
  },
  created(){
    const {id}=this.$route.params;
    // console.log(id)
    this.getDetail(id)
  },
  methods:{
   ...mapActions(['getDetail','addCart']),
   handleCart(){   //加入购入车
     this.addCart({userId:this.userId,shopId:this.detailInfo.id})
   },
   handleGo(){  //跳转购物车页
     this.$router.push('/shopcar')
   },
   handleBack(){   //返回上一页
     this.$router.go(-1)
   }
     
  }

}
</script>

<style scoped lang='scss'>
.detail{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .detail-head{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
  }
  .detail-main{
    flex: 1;
    overflow-y: scroll;
    img{
      width: 100%;
      height: 150px;
    }
  }
  .detail-foot{
    width: 100%;
  }
}

</style>